<template>
  <view class="cashgift_content" :style="'padding-top: ' + menuButton.bottom + 'px'">
    <Head title="礼金列表" :transparent="false">
      <!-- <text slot="action">搜索</text> -->
    </Head>
    <view class="cashgift_box">
      <view class="cashgift_item" v-for="(item, index) in cashgiftList" :key="index" @click="goDetail(item)">
        <view class="img_box">
          <!-- 主图 -->
          <view class="img">
            <ImageLoad :src="item.mainPic" mode="widthFix"/>
          </view>
          <!-- 遮罩层、淘礼金金额 -->
          <view class="coupon_box">
            ￥<text class="price">{{item.rightsPrice}}</text>
          </view>
        </view>
        <view class="item_info">
          <view class="cashgift_id">
            <text class="id">编号:{{item.id}}</text>
            <!-- 淘礼金状态 -->
            <text v-if="item.status === 1" class="status status_created">已创建</text>
            <text v-if="item.status === 2" class="status">已使用</text>
            <text v-if="item.status === 3" class="status status_expired">积分已返还</text>
          </view>
          <!-- 商品标题 -->
          <view class="title">{{item.dtitle}}</view>
          <!-- 数量 -->
          <view class="number_box">
            <view class="expired_time">有效期{{item.rightsEndTime}}</view>
            <view class="number">X {{item.rightsNumber}}</view>
          </view>
          <!-- 按钮组 -->
          <view class="btn_group">
            <button class="btn" @tap.native.stop="copy(item)">复制</button>
          </view>
        </view>
      </view>
    </view>
    <view class="cu-load bg-grey" v-if="isLoad" :class="finished?'over':'loading'"></view>
    <NoData v-if="!isLoad && cashgiftList && cashgiftList.length <= 0">
      <view slot="text">暂无礼金，赶快去使用积分兑换吧</view>
    </NoData>
    <ScrollToTop :scrollTop="scrollTop" />
  </view>
</template>

<script>
  import Head from '@/pages/pagecomponents/head'
  import NoData from '@/pages/pagecomponents/nodata'
  import ScrollToTop from '@/pages/pagecomponents/other/scrolltotop'
  import ImageLoad from '@/pages/pagecomponents/other/imageload'
  export default {
    components: {
      Head,
      NoData,
      ScrollToTop,
      ImageLoad,
    },
    data() {
      return {
        menuButton: this.menuButton,
        param: {
          pageNo: 1,
          pageSize: 10,
        },
        cashgiftList: [],
        isLoad: false,
        finished: false,
        scrollTop: 0, // 页面滚动高度
      }
    },
    computed:{
      isDev(){
        return this.$store.state.isDev
      },
    },
    onPageScroll(e) {
      // 滚动条滚动
      this.scrollTop = e.scrollTop
    },
    onPullDownRefresh() {
      // 下拉刷新
      this.getCashgiftList('pullDown')
    },
    onLoad() {
      this.getCashgiftList()
    },
    methods: {
      nextPaging() {
        // 下一页
        if (this.finished !== true) {
          this.param.pageNo += 1
          this.getCashgiftList()
        }
      },
      getCashgiftList(type) {
        if (type === 'pullDown') {
          // 下拉刷新
          this.cashgiftList = []
          this.param.pageNo = 1
          this.param.pageSize = 10
        }
        this.isLoad = true
        this.$api.user.pagingCashgift(this.param).then(res => {
          if (type === 'pullDown') {
            // 下拉刷新
            uni.stopPullDownRefresh();
          }
          this.isLoad = false
          if (res.data.list && res.data.list.length <= 0) {
            this.finished = true;
          } else {
            let itemList = res.data.list
            let cashgiftList = this.cashgiftList
            cashgiftList = cashgiftList.concat(itemList)
            this.cashgiftList = cashgiftList
          }
        }).catch(err => {
          this.isLoad = false
          this.finished = true;
        })
      },
      cancel(item) {
        uni.showModal({
          title: '提示',
          content: '确定要注销过期的礼金吗？若该礼金尚未使用，注销成功后可返还该礼金余额',
          success: res => {
            if (res.confirm) {}
          }
        });
      },
      copy(item) {
        // 复制淘礼金信息
        let copyText = `复制淘礼金成功:${item.rightsTkl},请在有效期内使用`
        // #ifdef MP-WEIXIN
        if (this.isDev === 'dev') {
          copyText = `复制礼金信息成功:${item.rightsTkl},请在有效期内使用`
        }
        // #endif
        // #ifndef H5
        uni.setClipboardData({
          data: copyText,
          success: function() {
            uni.hideToast(); // 隐藏默认提示框
            uni.showModal({
              content: copyText,
              showCancel: false
            });
          }
        });
        // #endif
        // #ifdef H5
        const btn = document.querySelector('.copy_tkl');
        const input = document.createElement('input');
        input.setAttribute('readonly', 'readonly');
        input.setAttribute('value', copyText);
        document.body.appendChild(input);
        input.select();
        input.setSelectionRange(0, 9999);
        if (document.execCommand('copy')) {
          document.execCommand('copy');
          uni.showModal({
            content: copyText,
            showCancel: false
          });
        }
        document.body.removeChild(input);
        // #endif
      },
      goDetail(item) {
        uni.navigateTo({
          url: `/pages/itemdetail/index?id=${item.id}&&goodsId=${item.goodsId}`
        });
      },
    }
  }
</script>

<style scoped lang="scss">
  .cashgift_content {
    position: relative;
    min-height: 100%;
    margin-top: var(--status-bar-height);
    padding: 50px 40upx 50upx;
    .cashgift_box {
      .cashgift_item {
        box-shadow: 0px 20upx 40upx 0px rgba(0, 0, 0, 0.1);
        border-radius: 10upx;
        background: #ffffff;
        margin-top: 20upx;
        .img_box {
          position: relative;
          display: inline-block;
          width: 250upx;
          height: 250upx;
          .img {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
          }
          .coupon_box {
            position: relative;
            border-radius: 10upx 0 0 10upx;
            width: 100%;
            height: 100%;
            line-height: 250upx;
            text-align: center;
            font-size: 30upx;
            font-weight: 800;
            color: #ffffff;
            background-color: rgba(0, 0, 0, 0.4);
            .price {
              font-size: 50upx;
            }
          }
        }
        .item_info {
          padding: 20upx 0 0 20upx;
          display: inline-block;
          vertical-align: top;
          .cashgift_id {
            height: 50upx;
            line-height: 50upx;
            .status {
              float: right;
              color: #2f5085;
            }
            .status_expired {
              color: #f4757e;
            }
            .status_created{
              color: #6ada71;
            }
          }
          .title {
            height: 50upx;
            margin-top: 10upx;
            width: 380upx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 30upx;
            line-height: 35upx;
          }
          .number_box {
            margin-top: 10upx;
            height: 50upx;
            color: #b1b6bd;
            .number {
              float: left;
            }
            .expired_time {
              float: right;
            }
          }
          .btn_group {
            height: 60upx;
            .btn {
              float: right;
              padding: 0 20upx;
              margin: 0;
              font-size: 30upx;
              height: 50upx;
              line-height: 50upx;
              background: #ffffff;
              color: #242424;
              border: 1px solid #242424;
              border-radius: 60upx;
            }
          }
        }
      }
    }
  }
</style>
